<template>
  <div>
    <h-box header="优惠券效果统计">
      <el-form :model="filterForm" inline>
        <el-form-item prop="couponTitle">
          <el-input placeholder="请输入优惠券名称" v-model="filterForm.couponTitle">
            <el-button @click="handleFilter" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleDownload" :loading="loading" icon="el-icon-download">导出数据</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="batch.list" stripe row-class-name="hui-font-number">
        <el-table-column prop="couponId" label="优惠券ID"></el-table-column>
        <el-table-column prop="couponTitle" label="优惠券名称"></el-table-column>
        <el-table-column prop="send" label="累计领券数(张)"></el-table-column>
        <el-table-column prop="consume" label="累计核销数(张)"></el-table-column>
        <el-table-column prop="tradeTotal" label="累计拉动营收(元)">
          <template slot-scope="scope">
            {{ scope.row.tradeTotal | currency('￥', 2) }}
          </template>
        </el-table-column>
        <el-table-column prop="tradeCount" label="累计关联订单(笔)"></el-table-column>
      </el-table>

      <!--分页，start-->
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="batch.pages" :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next" :total="batch.total" background class="hui-mt-2">
      </el-pagination>
      <!--分页，end-->
    </h-box>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          const today = new Date()
          const end = new Date()
          return (
            time.getTime() > end.setTime(today.getTime() - 3600 * 1000 * 24)
          )
        },
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      filterForm: {
        couponTitle: ''
      },
      loading: false,
      batch: {
        pages: 0,
        total: 0,
        list: []
      }
    }
  },
  created () {
    this.setDateRange()
    this.mockBatch()
  },
  methods: {
    // 初始化筛选日期
    setDateRange () {
      const today = new Date()
      const end = new Date()
      const start = new Date()
      end.setTime(today.getTime() - 3600 * 1000 * 24)
      start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
      this.filterForm.dateRange = [start, end]
    },
    // 翻页事件
    handleCurrentChange () {
      console.log(this.batch.pages)
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
      }, 500)
    },
    // 筛选事件
    handleFilter () {
      this.loading = true
      console.log(this.filterForm)
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
        this.loading = false
      }, 500)
    },
    // 下载事件
    handleDownload () {
      console.log('下载标签')
    },
    mockBatch () {
      let pages = this.batch.pages
      let total = 28
      let list = []
      let i = 0
      let tmp = [
        {
          couponId: '199',
          couponTitle: '优惠券名称1',
          send: 300,
          consume: 240,
          tradeTotal: 12223,
          tradeCount: 240
        },
        {
          couponId: '198',
          couponTitle: '优惠券名称2',
          send: 300,
          consume: 240,
          tradeTotal: 12223,
          tradeCount: 240
        }
      ]
      for (i in tmp) {
        list.push(tmp[i])
      }
      this.batch.list = list
      this.batch.pages = pages + 1
      this.batch.total = total
    }
  }
}
</script>

<style lang="less">

</style>
